<template>
	<view class="f-page">
    <u-gap height="5"></u-gap>
    <u-sticky bgColor="#fff"><u-tabs :list="dynastyList"  lineWidth="20" lineHeight="7"
    :lineColor="`url(${style.lineBg}) 100% 100%`"
    :activeStyle="{color: '#303133', fontWeight: 'bold', transform: 'scale(1.05)'}"
    :inactiveStyle="{color: '#606266',transform: 'scale(1)'}"
    itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="clickHandle"></u-tabs></u-sticky>
    <u-gap height="10"></u-gap>
    <u-loading-icon :show="loading"/>
    <u-list @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in authorArray" :key="index">
        <u-cell  :title="'['+item.dynasty+']'+item.name" :titleStyle="style.titleStyle">
        <u--image slot="icon" :src="item.avatar" width="80px" height="100px" @click="navTo('/pagework/poetry/list',item)"></u--image>
        <u-read-more slot="label"  showHeight="80"><rich-text :nodes="item.longDesc" style="font-size: 13px;color:#909399"/></u-read-more>
        </u-cell>
		  </u-list-item>
		</u-list>
    <u-divider text="没有更多了" v-if="finished"></u-divider>
	</view>
</template>
<script>
import { fetchPoetList } from '@/api/poetry'
export default {
  mixins: [uni.$u.mixin],
	data() {
		return {
      style: {
        lineBg: '',
        fontSize: 16,
        titleStyle: {'font-size': '13px','color': '#3c9cff'}
      },
      option: {},
      loading: false,
      finished: false,
      totalPage: 0,
      listQuery: {page: 1,statusList: []},
      theme: {},
      dynastyList: [{'name': '全部'},{'name':'上古'},{'name':'夏'},{'name':'商'},{'name':'周'},{'name':'秦'},{'name':'汉'},{'name':'三国'},{'name':'晋'},{'name':'五代十国'},{'name':'南北朝'},{'name':'隋'},{'name':'唐'},{'name':'宋'},{'name':'辽'},{'name':'金'},{'name':'元'},{'name':'明'},{'name':'清'},{'name':'近现代'},{'name':'现代'}],
      authorArray: []
		}
	},
  onLoad: function(option) {
    this.option = option
    this.loadmore()
  },
	methods: {
    scrolltolower() {
      if (this.listQuery.page < this.totalPage) {
        this.listQuery.page = this.listQuery.page + 1
        this.loadmore()
      }else{
        this.finished = true
      }

    },
    loadmore() {
      this.loading = true
      this.listQuery.kindId = this.option.kindId
      this.listQuery.cat = this.option.cat
      this.listQuery.name = this.option.name
      fetchPoetList( {params: this.listQuery,custom: { auth: true,toast: false }}).then(response => {
        this.authorArray = this.authorArray.concat(response.data.records)
        this.totalPage = response.data.pages
        this.loading = false;
      })
    },
    navTo(url,item) {
      this.$Router.push({ path: url, query: {kindId:0, cat: item.id,name: item.name}})
    },
    clickHandle(item) {
      this.authorArray = []
      this.listQuery.page = 1
      if(item.name != '全部'){
        this.listQuery.dynasty = item.name
      }else{
        this.listQuery.dynasty = ''
      }

      this.loadmore()
    }

	}

}
</script>
<style lang="scss">

 .scroll-list {
    @include flex(column);
    &__line {
      @include flex;
      margin-top: 10px;
      &__item {
        margin-right: 15px;
        &__image {
          width: 61px;
          height: 48px;
        }
        &__text {
          margin-top: 5px;
          color: $u-content-color;
          font-size: 12px;
          text-align: center;
        }
        &--no-margin-right {
          margin-right: 0;
        }
      }
    }
 }
</style>
